<section [formGroup]="customerAttributesConfigForm" class="tb-form-panel stroked">
  <div class="tb-form-panel-title" translate>tb.rulenode.mapping-of-customers</div>
  <div class="flex flex-1 items-center justify-center">
    <div class="fetch-to-data-toggle">
      <tb-toggle-select class="fetch-to-data-toggle" formControlName="dataToFetch" appearance="fill">
        <tb-toggle-option *ngFor="let data of fetchToData" [value]="data.value">
          {{ data.name }}
        </tb-toggle-option>
      </tb-toggle-select>
    </div>
  </div>
  <tb-kv-map-config
    required
    formControlName="dataMapping"
    [requiredText]="'tb.rulenode.attr-mapping-required' | translate"
    [labelText]="selectTranslation('tb.rulenode.latest-telemetry-mapping','tb.rulenode.attributes-mapping') | translate"
    [keyText]="selectTranslation('tb.rulenode.source-telemetry','tb.rulenode.source-attribute') | translate"
    [keyRequiredText]="selectTranslation('tb.rulenode.source-telemetry-required','tb.rulenode.source-attribute-required') | translate"
    [valText]="'tb.rulenode.target-key' | translate"
    [valRequiredText]="'tb.rulenode.target-key-required' | translate"
    [hintText]="'tb.rulenode.kv-map-pattern-hint'"
    popupHelpLink="rulenode/customer_attributes_node_fields_templatization">
  </tb-kv-map-config>
  <tb-msg-metadata-chip
    [labelText]="customerAttributesConfigForm.get('dataToFetch').value === DataToFetch.LATEST_TELEMETRY ?
    ('tb.rulenode.add-mapped-latest-telemetry-to' | translate) : ('tb.rulenode.add-mapped-attribute-to' | translate)"
    formControlName="fetchTo">
  </tb-msg-metadata-chip>
</section>
